<script type="text/javascript" src="__PUBLIC__/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery/lin_picSwitch.js"></script>
                        	<div class="jqueryTitle mt5">
                            	<span>实现原理</span>
                            </div>
                            <div class="p15">
                            	图片切换其实就要tab切换在升级版，获取到当前需要处理元素的下标，然后做出相应的动画特效即可。注意判断当前运动是否结束，不然一直点下一张按钮动画会无限排进队列。
                            </div>
                            
                        	<div class="jqueryTitle mt5">
                            	<span>相关参数</span>
                            </div>
                            <div class="p15">
                            	<table cellpadding="0" cellspacing="0" class="jqueryAttr">
                                	<thead>
                                    	<tr>
                                        	<th>参数名</th>
                                            <th>参数说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
		<tr>
        	<td>scrollObj</td>
            <td>滚动对象的类名或者ID,默认.lin_scrollObj</td>
        </tr>
		<tr>
        	<td>navObj</td>
            <td>控制导航的类名,默认lin_navObj</td>
        </tr>        
        <tr>
        	<td>haveNav</td>
            <td>是否带有控制导航,默认false</td>
        </tr>
        <tr>
        	<td>currentClass</td>
            <td>当前状态的类名,默认current</td>
        </tr>
        <tr>
        	<td>btnPre</td>
            <td>前一张按钮样式,默认空值(格式:.lin_btnPre)</td>
        </tr>
        <tr>
        	<td>btnNext</td>
            <td>下一张按钮样式,默认空值(格式:.lin_btnNext)</td>
        </tr>
        <tr>
        	<td>autoPlay</td>
            <td>是否自动播放,默认True</td>
        </tr>
        <tr>
        	<td>speed</td>
            <td>动画播放速度,默认750</td>
        </tr>
        <tr>
        	<td>autoPlayTimer</td>
            <td>自动播放间隔时间,默认3000</td>
        </tr> 
        <tr>
        	<td>effect</td>
            <td>动画类型,默认水平滚动scrollX(scrollY,scrollX,fade)</td>
        </tr>
        <tr>
        	<td>easing</td>
            <td>附加动态效果,默认easeInOutExpo,其他动画特效参考文件jquery.easing</td>
        </tr>                                                               
        </tbody>
                                </table>
                            </div> 
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<p class="pt15">前期准备：头部加入jquery-1.7.2.min.js;jquery.easing.min.js;lin_picSwitch.js文件</p>
                            	<div class="pt15"><strong>效果一:水平滚动</strong></div>
                                <p>CSS</p>
                                <pre>.lin_imgAd{width:200px; height:125px; overflow:hidden; margin:0px auto; position:relative;}
.lin_scrollObj{position:absolute; left:0px; top:0px; z-index:1;}
.lin_scrollObj li{float:left; height:125px;width:200px;}
.lin_navObj{position:absolute; z-index:2; bottom:10px;}
.lin_navObj li{background-color: #FFFFFF;border: 1px solid #CCCCCC;color: #999999;display: inline;float: left;line-height: 21px;padding: 0 5px;float:left; margin-right:2px; display:inline;}
.lin_navObj li.current{border-color:#ff8900; color:#ff8900;}
.lin_btnPre,.lin_btnNext{position:absolute; z-index:2; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_btnNext{right:1px;}.lin_btnPre{left:1px;}</pre>
                                <p>js</p>
                                <pre>$("#demo1").lin_picSwitch({scrollObj:'.lin_picSwitch_scrollObj',btnPre:".lin_btnPre",btnNext:".lin_btnNext"});</pre>
             <div class="blank10"></div>
			 <div id="demo1" class="lin_imgAd">
            	<a href="javascript:void(0);" title="上一张" class="lin_btnPre"> < </a>
                <a href="javascript:void(0);" title="下一张" class="lin_btnNext"> > </a>
            	<ul class="lin_picSwitch_scrollObj">
                	<li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/b.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/b.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                </ul>
            </div>
            
			<div class="pt15"><strong>效果二:垂直滚动</strong></div>
                                <p>CSS</p>
                                <pre>.lin_imgAd{width:200px; height:125px; overflow:hidden; margin:0px auto; position:relative;}
.lin_scrollObj{position:absolute; left:0px; top:0px; z-index:1;}
.lin_scrollObj li{float:left; height:125px;width:200px;}
.lin_navObj{position:absolute; z-index:2; bottom:10px;}
.lin_navObj li{background-color: #FFFFFF;border: 1px solid #CCCCCC;color: #999999;display: inline;float: left;line-height: 21px;padding: 0 5px;float:left; margin-right:2px; display:inline;}
.lin_navObj li.current{border-color:#ff8900; color:#ff8900;}
.lin_btnPre,.lin_btnNext{position:absolute; z-index:2; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_btnNext{right:1px;}.lin_btnPre{left:1px;}
.lin_imgAd_2 .lin_scrollObj li{clear:both;}</pre>
                                <p>js</p>
                                <pre>$("#demo2").lin_picSwitch({scrollObj:'.lin_picSwitch_scrollObj',effect:'scrollY',autoPlayTimer:5000});</pre>
             <div class="blank10"></div>
			 <div id="demo2" class="lin_imgAd lin_imgAd_2">
            	<ul class="lin_picSwitch_scrollObj">
                	<li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/b.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/b.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                </ul>
            </div>
            
<div class="pt15"><strong>效果三:渐隐渐出</strong></div>
                                <p>CSS</p>
                                <pre>.lin_imgAd{width:200px; height:125px; overflow:hidden; margin:0px auto; position:relative;}
.lin_scrollObj{position:absolute; left:0px; top:0px; z-index:1;}
.lin_scrollObj li{float:left; height:125px;width:200px;}
.lin_navObj{position:absolute; z-index:2; bottom:10px;}
.lin_navObj li{background-color: #FFFFFF;border: 1px solid #CCCCCC;color: #999999;display: inline;float: left;line-height: 21px;padding: 0 5px;float:left; margin-right:2px; display:inline;}
.lin_navObj li.current{border-color:#ff8900; color:#ff8900;}
.lin_btnPre,.lin_btnNext{position:absolute; z-index:2; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_btnNext{right:1px;}.lin_btnPre{left:1px;}
.lin_imgAd_3 .lin_scrollObj li{ position:absolute; left:0px; top:0px; }	</pre>
                                <p>js</p>
                                <pre>$("#demo3").lin_picSwitch({scrollObj:'.lin_picSwitch_scrollObj',effect:'fade',autoPlayTimer:6000});</pre>
             <div class="blank10"></div>
			 <div id="demo3" class="lin_imgAd lin_imgAd_3">
            	<ul class="lin_picSwitch_scrollObj">
                	<li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/b.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/b.gif"  alt="图片一"/></li>
                    <li><img src="__PUBLIC__/images/jquery/a.gif"  alt="图片一"/></li>
                </ul>
            </div>                         
                            	                             
                                
                            </div>  

                            <div class="clearfix pt40 pb40">
                            	<a href="http://url.cn/KPEfyN" title="《{$data.title}》源代码下载" class="jqueryDown" rel="nofollow" target="_blank">《{$data.title}》源代码下载</a>
                            </div>   
                        
 
 <script type="text/javascript">
 $(function(){
	 	$("#demo1").lin_picSwitch({scrollObj:'.lin_picSwitch_scrollObj',btnPre:".lin_btnPre",btnNext:".lin_btnNext"});
		$("#demo2").lin_picSwitch({scrollObj:'.lin_picSwitch_scrollObj',effect:'scrollY',autoPlayTimer:5000});
		$("#demo3").lin_picSwitch({scrollObj:'.lin_picSwitch_scrollObj',effect:'fade',autoPlayTimer:6000});	
	});
 </script>   
